<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
    
</div>
<script>
    let App={
        template:`
        <div>
            <div class="box"></div>
            <div style="width:200px;height:200px;background:pink"></div>
            <div :class="[str,str2, 3>4 ? 'yes':'no']"></div>
            <p :class="{ active: isActive }"></p>
            <p :style="{color: 'blue', fontSize: '40px'}">njk</p>
            <p :style="{color: isActive ? 'blue' : 'pink' }">大时刻保持空间都被v</p>
            <p :style="styles">ckzjshvbukaj</p>
        </div>
    `,
    data(){
        return{
            str:'box2',
            str2:'box3',
            isActive:true,
            styles:{
                fontSize:'40px',
                color:'pink',
                backgroundColor:'#f3f3f3'

            }
        }
    }
}
    new Vue({
        render: h => h(App)
    }).$mount("#app")
</script>
</body>
</html>